<template>
  <div class="ele-nav">
    <el-row>
      <el-col :span="7" style="padding-top: 10px;font-size: 26px;">
        <el-icon class="el-icon-my-logo"></el-icon><span style="font-weight: bolder;color:white;font-family: serif;">&nbsp;&nbsp;&nbsp;山西大学蓝桥实训教学项目</span>
      </el-col>
      <el-col :span="4" style="float: right;">
        <el-dropdown style="font-size: 20px;margin-top: 20px;" @command="handleDropdownCommand">
            <span class="el-dropdown-link">
              {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-my-user" command="1">帐户信息</el-dropdown-item>
            <el-dropdown-item icon="el-icon-my-quit" command="2">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapActions,mapGetters} from 'vuex'
  export default {
    name: "Nav",

    computed:{
       ...mapGetters(['username'])
    },

    methods:{

      ...mapActions(['logout']),

      handleDropdownCommand(command){
        console.log("command="+command);
        if(command==2){
          this.api.__api__logout()
            .then(data=>{
              this.logout();
              this.$router.push('/login');
            })
        }else if(command==1){
          this.$message.info("不好意思，此功能暂未实现!");
        }
      }
    }
  }
</script>

<style >

  .ele-nav {
    width: 100%;
    height: 100%;
    background-color: rgb(131, 178, 239);
  }

  .el-dropdown-link {
    cursor: pointer;
    color: white;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .el-icon-my-quit{
    background: url(../../assets/icons/svg/quit.svg) center no-repeat;
    background-size: cover;
  }
  .el-icon-my-quit:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-my-user{
    background: url(../../assets/icons/svg/people.svg) center no-repeat;
    background-size: cover;
  }
  .el-icon-my-user:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-my-logo{
    background: url(../../assets/icons/svg/github.svg) center no-repeat;
    background-size: cover;
  }
  .el-icon-my-logo:before{
    content: "替";
    font-size: 30px;
    visibility: hidden;
  }
</style>
